<template>
  <view class="personal-data">
    <view class="photo-box">
		<view class="pictrue-box" @tap="chooseImage">
		  <img class="pic" :src="avatar" />
		  <view class="photo-tips">
		  	点击修改头像
		  </view>
		</view>
	</view>
	<view class="list">
		<view class="item acea-row row-between-wrapper">
			<view>姓名</view>
			<view class="input">
			  <input type="text" v-model="userInfo.nickname" />
			</view>
		</view>
		<!-- <view class="item acea-row row-between-wrapper">
			<view>性别</view>
			<view class="input acea-row row-between-wrapper">
			  <picker style="width: 100%;" @change="bindPickerChange" :value="sexIndex" :range="sexArray">
				  <view class="link-arrow">
				  	<text>{{sexArray[sexIndex]}}</text>
					<image class="icon-arrow" src="../../../static/images/icon-arrow-gray.png" mode=""></image>
				  </view>
			  </picker>
			</view>
		</view> -->
		<view class="item acea-row row-between-wrapper">
			<view>手机号</view>
			<view class="input">
				<!-- <input type="text" v-model="userInfo.phone" placeholder="未绑定"/> -->
			  <input type="number" maxlength="11" placeholder="请绑定正确的手机号" v-model="userInfo.phone" class="id" />
			</view>
		</view>
        <view class="item acea-row row-between-wrapper" v-if="userInfo.arvoAss">
          <view>所加协会</view>
          <view class="input acea-row row-between-wrapper">
			  {{userInfo.arvoAss.aname}}
          </view>
        </view>
    </view>
    <view class="modifyBnt bg-color-blue" @click="submit">保存资料</view>
    <!-- #ifndef MP-WEIXIN -->
    <view
      class="logOut cart-color acea-row row-center-wrapper"
      @click="logout"
    >退出登录</view>
    <!-- #endif -->
  </view>
</template>
<script>
import { mapGetters } from "vuex";
import { trim, isWeixin, chooseImage } from "@/utils";
import { VUE_APP_API_URL } from "@/config";
import {
  postUserEdit,
  getLogout,
  switchH5Login,
  getUserInfo,
} from "@/api/user";
import cookie from "@/utils/store/cookie";
import store from "@//store";
import dayjs from "dayjs";

export default {
  name: "PersonalData",
  components: {
    // VueCoreImageUpload
  },
  data: function () {
    return {
      avatar: "",
      isWeixin: false,
      currentAccounts: 0,
      switchUserInfo: [],
      userIndex: 0,
	  sexArray: ['男', '女'],
	  sexIndex: 0,
    };
  },
  computed: mapGetters(["userInfo"]),
  mounted: function () {
    this.avatar = this.userInfo.avatar;
    this.isWeixin = isWeixin();
    this.getUserInfo();
  },
  methods: {
    goChangePassword() {
      this.$yrouter.push("/pages/user/ChangePassword/index");
    },
	bindPickerChange(e) {
		this.sexIndex = e.detail.value
	  },
    switchAccounts: function (index) {
      let that = this;
      this.userIndex = index;
      let userInfo = this.switchUserInfo[this.userIndex];
      if (this.switchUserInfo.length <= 1) return true;
      if (userInfo === undefined) {
        uni.showToast({
          title: "切换的账号不存在",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      if (userInfo.user_type === "h5") {
        switchH5Login()
          .then(({ data }) => {
            uni.hideLoading();
            const expires_time = dayjs(data.expires_time);
            store.commit("login", data.token, expires_time);
            that.$emit("changeswitch", false);
            location.reload();
          })
          .catch((err) => {
            uni.hideLoading();
            uni.showToast({
              title:
                err.msg || err.response.data.msg || err.response.data.message,
              icon: "none",
              duration: 2000,
            });
          });
      } else {
        cookie.set("loginType", "wechat", 60);
        uni.hideLoading();
        this.$store.commit("logout");
        this.$emit("changeswitch", false);
      }
    },
    getUserInfo: function () {
      let that = this;
      getUserInfo().then((res) => {
        // let switchUserInfo = res.data.switchUserInfo;
        // for (let i = 0; i < switchUserInfo.length; i++) {
        //   if (switchUserInfo[i].uid == that.userInfo.uid) that.userIndex = i;
        //   if (
        //     !that.isWeixin &&
        //     switchUserInfo[i].user_type != "h5" &&
        //     switchUserInfo[i].phone === ""
        //   )
        //     switchUserInfo.splice(i, 1);
        // }
        // that.$set(this, "switchUserInfo", switchUserInfo);
      });
    },
    chooseImage() {
      chooseImage((img) => {
        this.avatar = img;
      });
    },

    submit: function () {
      let userInfo = this.userInfo;
      postUserEdit({
        nickname: trim(this.userInfo.nickname),
		phone:trim(this.userInfo.phone),
        avatar: this.avatar,
      }).then(
        (res) => {
          this.$store.dispatch("userInfo", true);
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000,
          });
          this.$yrouter.back();
        },
        (err) => {
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: "none",
            duration: 2000,
          });
        }
      );
    },
    logout: function () {
      uni.showModal({
        title: "提示",
        content: "确认退出登录?",
        success: (res) => {
          if (res.confirm) {
            getLogout()
              .then((res) => {
                this.$store.commit("logout");
                this.$yrouter.replace({
                  path: "/pages/user/Login/index",
                  query: {},
                });
              })
              .catch((err) => {});
          } else if (res.cancel) {
            // console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>
<style lang="scss">
	page{
		background-color: #fff;
	}
	.bg-color-blue{
		background-color: $uni-color-theme;
	}
	.cart-color{
		color: $uni-color-theme !important;
		border: 1px solid $uni-color-theme !important;
	}
	.personal-data .list .item .input{
		width: auto;
		flex: 1;
		display: flex;
		justify-content: flex-end;
		color: #333;
	}
	.personal-data .list .item .input uni-input{
		color: #333;
	}
	.link-arrow{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.icon-arrow{
			width: 13rpx;
			height: 26rpx;
			margin-left: 10rpx;
			&::before{
				display: none;
			}
		}
	}
	.photo-box{
		height: 420rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.pictrue-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.pic{
				width: 224rpx;
				height: 224rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			.photo-tips{
				color: #868D93;
				font-size: 28rpx;
				margin-top: 18rpx;
			}
		}
	}
</style>